import React from 'react';
import '@/components/Sider/Sider.scss'
import type { MenuProps } from 'antd';
import { Menu, Layout } from 'antd';
import {
    EnvironmentOutlined, NotificationOutlined,
    PictureOutlined,
} from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { useDispatch } from 'react-redux'
import { useState } from 'react';
import { useSelector } from "react-redux";

interface Props {

}

function Sider(props: Props) {
    let navigate = useNavigate()
    let dispatch = useDispatch()

    let url = useSelector((newstate: any) => newstate.keyPath)
    let urlOut = url[0]
    let urlIn
    if (url.length == 2) {
        urlIn = url[1]
    } else {
        urlIn = url[0]
    }


    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
        } as MenuItem;
    }
    type MenuItem = Required<MenuProps>['items'][number];
    const items: MenuItem[] = [

        getItem('系统首页', 'sub1', <PictureOutlined />, [
            getItem('系统首页', '/index/home', <EnvironmentOutlined />),
        ]),
        getItem('课程管理', 'sub2', <PictureOutlined />, [
            getItem('直播', '/index/livestreaming', <EnvironmentOutlined />),
            getItem('图文课程', '/index/imagetext', <EnvironmentOutlined />),
            getItem('视频课程', '/index/video', <EnvironmentOutlined />),
            getItem('音频课程', '/index/audio', <EnvironmentOutlined />),
            getItem('专栏课程', '/index/column', <EnvironmentOutlined />),
            getItem('课程分类', '/index/cate', <EnvironmentOutlined />),
            getItem('题库', '/index/questions', <EnvironmentOutlined />),
            getItem('试卷库', '/index/tests', <EnvironmentOutlined />),
        ]),
        getItem('实物管理', 'sub3', <PictureOutlined />, [
            getItem('商品管理', '/index/good', <EnvironmentOutlined />),
            getItem('新增商品', '/index/goodadd', <EnvironmentOutlined />),
            getItem('编辑商品', '/index/goodedit', <EnvironmentOutlined />)

        ]),

        getItem('用户管理', 'sub4', <PictureOutlined />, [
            getItem('用户查询', '/index/search', <EnvironmentOutlined />),
            getItem('用户标签', '/index/Label', <EnvironmentOutlined />)
        ]),
        getItem('数据分析', 'sub6', <PictureOutlined />, [
            getItem('数据概括', '/index/gaikuo', <EnvironmentOutlined />),
            getItem('流量分析', '/index/fenxi', <EnvironmentOutlined />),
            getItem('学习分析', '/index/xuexi', <EnvironmentOutlined />),
            getItem('直播分析', '/index/zhibo', <EnvironmentOutlined />)
        ]),
        getItem('资产管理', 'sub7', <PictureOutlined />, [
            getItem('资产管理', '/index/zichan', <EnvironmentOutlined />)
        ]),
        getItem('营销管理', 'sub8', <NotificationOutlined />, [
            getItem('优惠券', '/index/coupon'),
            getItem('限时折扣', '/index/discount'),
            getItem('满减满折', '/index/decrement'),
            getItem('秒杀', '/index/seckill'),
            getItem('满包邮', '/index/shipping'),
            getItem('满赠', '/index/gift'),
            getItem('拼团', '/index/collage'),
            getItem('套餐', '/index/package'),
            getItem('场景营销', '/index/scenario'),
        ]),
        getItem('设置', 'sub9', <PictureOutlined />, [
            getItem('Banner图管理', '/index/banner', <EnvironmentOutlined />),
            getItem('员工管理', '/index/staff', <EnvironmentOutlined />),
            getItem('角色管理', '/index/role', <EnvironmentOutlined />),
            getItem('操作日志', '/index/logss', <EnvironmentOutlined />),
            getItem('个人信息', '/index/information', <EnvironmentOutlined />),
        ]),

    ]
    let handleClick = ({ key, keyPath }: any) => {
        // console.log(key,keyPath);
        dispatch({ type: 'SAVE_KEYPATH', payload: keyPath })
        navigate(key)
    }

    // 只展开当前父级菜单
    const rootSubmenuKeys = ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7','sub8','sub9'];
    const [openKeys, setOpenKeys] = useState([urlOut]);
    let openChange = (keys: any) => {
        const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }

    }



    return (
        <Layout.Sider className='sider' collapsed={false} >
            <div className='title'>
                <h2>运营后台</h2>
            </div>
            <Menu className='list_item'
                defaultSelectedKeys={['/index/home']}
                // selectedKeys={urlIn} 
                // openKeys={openKeys}
                mode="inline" items={items}
                onClick={handleClick}
            />
        </Layout.Sider>
    );
}

export default Sider;